<template>
  <div>
    <el-transfer v-model="userRole" :filterable="true" :data="roleData" :titles="[$t('system.roleList'),$t('system.distedRole')]" />
  </div>
</template>

<script>
import dataHelper from '@/utils/dataHelper'
import userApi from "@/api/user";
export default {
  name: 'SystemUserSetrole',
  components: {},
  model: {
    prop: 'value',
    event: 'valuechange'
  },
  props: {
    value: {
      type: Array
    },
    userid: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      userRole: [],
      roleData: []
    }
  },

  computed: {},
  watch: {},
  mounted() {
    dataHelper.queryHelper.query(this.$route.path, 'system/role.entity').then(res => {
      this.roleData = []
      res.data.rows.forEach((item, index) => {
        this.roleData.push({
          label: item.name,
          key: item.id
        })
      })
    })
    dataHelper.queryHelper
      .query(this.$route.path, 'system/user_role.entity', { userid: this.userid })
      .then(res => {
        this.userRole = []
        res.data.rows.forEach((item, index) => {
          this.userRole.push(item.roleid)
        })
      })
  },
  methods: {
    save() {
      const promise = userApi.setUserRole(this.userid, this.userRole.join(','))
      promise.then(res => {
        this.$message({
          message: this.$t("system.roleSetSucc"),
          type: 'success'
        })
      })
      return promise
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scope>
</style>

